<#--
/**
 * Copyright 2012 Claude Houle claude.houle@gmail.com
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-->
<#macro textfield id="" class="" readonly=false password=false maxlength=1 value="" prompt="" regex="">
<#escape x as x?html>
<div id="${id}_wrapper" data-fieldId="${id}" class="uic-textfield  <#if class??>${class}</#if>">
	<input id="${id}" <#if password>type="password"<#else>type="text"</#if>
		<#if readonly>readonly="readonly"</#if>
		maxlength="${maxlength}"
		value="${value}"></input>
	<#if prompt != "" || regex != "">
		<script type="text/javascript">
			<#escape x as x?js_string>
				<#if prompt != "">
					if( $("#${id}").val() == "" ){
						$("#${id}").addClass("uic-textfield-untouched");
						$("#${id}").val("${prompt}");
					}

					$("#${id}").focus( function( event ){
						$(this).removeClass("uic-textfield-untouched");
						if( $(this).val() == "${prompt}" ){
							$(this).val("");
						}
					} );

					$("#${id}").blur( function( event ){
						if( $(this).val() == "" ){
							$(this).addClass("uic-textfield-untouched");
							$(this).val("${prompt}");
						}
					}
				</#if>

				<#--
				The REGEX support is there to prevent users from inputing certains pattern within a textfield. However,
				if we enable this, we cannot support copy-paste as the clipboard is not accessible from the browsers
				in a cross-browser fashion (i.e. Certain browser do not allow clipboard access at all)

				Therefore this feature is a niche-feature that should be used only when specially needed. Otherwise I
				recommend using change() listener and validate on form-submit (if possible).
				-->
				<#if regex != "">

					$("#${id}").keydown( function(event) {
						if(
							( event.keyCode == 86 && event.metaKey ) || // ctrl-v
							( event.keyCode == 88 && event.metaKey )  // ctrl-x
					    ){
							event.preventDefault();
							return;
					    }
					});

					$("#${id}").keypress( function(event){
						if (
							( event.charCode == 46 ) || // Delete
							( event.charCode == 8 ) ||  // Escape
							( event.charCode == 9 ) ||  // TAB
							( event.charCode == 16 ) || // Shift
							( event.charCode == 17 ) || // Ctrl
							( event.charCode == 18 ) || // Alt
							( event.charCode == 91 ) || // Left Windows Key
							( event.charCode == 92 ) || // Right Windows Key
							( event.charCode == 65 && event.metaKey ) || // ctrl-a
							( event.charCode == 67 && event.metaKey ) || // ctrl-c
							( event.charCode >  36 && event.charCode < 41 ) // Arrows
						) {
							<#--let it happen, don't do anything -->
							return;
						}

						var sel = $(this).getSelection();
						var value = $(this).val();
						var str = String.fromCharCode(event.charCode);
						value = value.substring(0, sel.start) + str + value.substring(sel.end)

						var pattern = new RegExp("${regex}");
						var matches = pattern.test( value );
						if( !matches ){
							event.preventDefault();
						}
					} );
				</#if>
			</#escape>
		</script>
	</#if>
</div>
</#escape>
</#macro>